<!--
 * @Author: huang liang miao 1127255342@qq.com
 * @Date: 2024-11-11 09:27:26
 * @LastEditors: huang liang miao 1127255342@qq.com
 * @LastEditTime: 2024-12-18 13:40:35
 * @FilePath: \dcy-webd:\webCode\dcyCode\scientific_research_manager_web\src\views\system\operlog\index.vue
 * @Description: 操作日志
-->
<script setup lang="ts">
import { useRequest } from 'vue-hooks-plus'
import formateDate from '@/utils/formateDate'
import { getOperlogListPage } from "@/api/system/log/index"

const configList = ref([])
const showSearch = ref(true)
const total = ref(0)
const queryParams = ref<any>({
  page: 1,
  size: 20,
  nameOrCode: '',
  type: undefined,
  startTime: undefined,
  endTime: undefined,
  orderType: 'desc',
  orderBy: 'updatedTime'
})
// 搜索条件组件配置数据
const conditionComponents = ref([
  {
    type: 0,
    key: 'nameOrCode',
    width: "220px",
    placeholder: '请输入用户姓名或工号'
  },
  {
    type: 1,
    key: 'type',
    value: '单选框',
    width: "220px",
    config: {
      options: [
      {title: '新增', value: '1'},
      {title: '编辑', value: '2'},
      {title: '删除', value: '3'},
      {title: '审核', value: '4'},
      {title: '导入', value: '5'},
      {title: '导出', value: '6'},
      {title: '其他', value: '7'}
      ]
    }
  },
  {
    type: 2,
    key: 'calendar',
    value: '日历',
    width: "220px",
  },
])

// 表头
const columns = ref([
{
  title: '系统模块',
  minWidth: 120,
  dataIndex: 'module',
  formatter: (record) => {
    // 系统模块：1. 项目管理 2. 科研成果 3、用户管理 4、角色管理 5、字典管理
    const operType = {
      1: '项目管理',
      2: '科研成果',
      3: '用户管理',
      4: '角色管理',
      5: '字典管理',
    }
    return operType[record.module]
  },
},
{
  title: '操作类型',
  minWidth: 120,
  dataIndex: 'type',
  formatter: (record) => {
    // 日志类型：1. 新增，2. 编辑 3. 删除 4. 审核 5. 导入 6.导出 6.其他
    const operType = {
      1: '新增',
      2: '编辑',
      3: '删除',
      4: '审核',
      5: '导入',
      6: '导出',
      7: '其他',
    }
    return operType[record.type]
  },
},
{
  title: '操作人员',
  minWidth: 120,
  dataIndex: 'updatedByName',
},
{
  title: '操作人员工号',
  minWidth: 120,
  dataIndex: 'code',
},
{
  title: '操作状态',
  minWidth: 120,
  dataIndex: 'status',
  formatter: (record) => {
    return record.status === 1 ? '成功' : '失败'
  },
},
{
  title: '操作信息',
  minWidth: 280,
  dataIndex: 'description',
},
{
  title: '操作时间',
  minWidth: 150,
  dataIndex: 'updatedTime',
  formatter: (record) => {
    return formateDate(record.updatedTime).format('YYYY.MM.DD HH:mm:ss')
  },
}
])
// 查询列表
const { run: getOperlogList, loading } = useRequest(getOperlogListPage, {
  // false 为自动执行
  manual: true,
  // 请求成功
  onSuccess: (data: any) => {
    configList.value = data.content || []
    total.value = data.totalElements
  },
})
onSearch()

// 过滤查询
function onSearch() {
  getOperlogList(queryParams.value)
}
// 条件过滤
function formSearch(params){
  queryParams.value = {
    ...queryParams.value,
    ...params,
    calendar: undefined,
    startTime: params.calendar ? params.calendar[0] + ' 00:00:00' : undefined,
    endTime: params.calendar ? params.calendar[1] + ' 23:59:59' : undefined,
  }
  onSearch()
}
// 分页
function pagetionSerach(params){
  queryParams.value = {
    ...queryParams.value,
    ...params,
  }
  onSearch()
}

</script>

<template>
  <div class="app-container">
    <SearchBar :components="conditionComponents" @search="formSearch" class="mb-[16px]" />
    <TableForm
      :auto-height="true"
      :data="configList"
      :columns="columns"
      :tableLoading="loading"
      :total-count="total"
      v-model:showSearch="showSearch"
      :showToolBar="false"
      @refresh="pagetionSerach"
    />
  </div>
</template>